<template>
  <view>
    <u-navbar
        title="查看美团账号"
        placeholder
        titleStyle="color:white"
        leftIconColor="#fff"
        auto-back
        bgColor="#FA762B"
    >
    </u-navbar>
    <view class="novice" style="background-color: #FA762B;padding-top: 60rpx" @click="toMtCount">
      <!-- #ifdef H5 -->
      <wx-open-launch-weapp id="launch-btn"
                            username="gh_870576f3c6f9" path="mt/pages/setting/setting.html"
                            style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
        <component :is="'script'" type='text/wxtag-template' style="display: block;">
          <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
        </component>
      </wx-open-launch-weapp>
      <!-- #endif -->
      <view
          style="padding-bottom:20rpx;left: 0;text-align: center;background-color: #FA762B;color: white"
          v-if="!userReader">
        {{ downTime === 0 ? '恭喜您获得100金币' : downTime + '秒后，获得100金币' }}
      </view>
      <view
          style="width: 80%;height: 80rpx;background-color: #ffd325;color:#242424;font-size:28rpx;font-weight:bold;margin: auto;border-radius: 60rpx;text-align: center;line-height: 80rpx;letter-spacing: 3rpx">
        一键查看美团账号
      </view>
      <view class="novice"
            style="background-color: #e26c29;padding: 20rpx;width: 92%;color: #fff8f8;font-size: 24rpx;letter-spacing: 1rpx;text-align: center;line-height: 46rpx;border-radius: 20rpx;margin-top: 30rpx">
        一键查看只可以看美团小程序登录的账号，使用美团或美团外卖下单的请按图文教程查看账号是否一致
      </view>
    </view>
    <view class="novice">
      <!--      <u-image mode="widthFix" width="750rpx" height="3400rpx" :src="BaseImgUrl() + '/images/mt_help.png'" @load="loadSuccess"></u-image>-->
      <image mode="widthFix" :src="BaseImgUrl + '/images/mt_help.png'"></image>
    </view>
  </view>
</template>

<script setup>
import {BaseImgUrl} from "../../utils/lshttp";
import {toMiniAppSetting} from "../../utils/utils";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import {onLoad} from "@dcloudio/uni-app";
import {addGoldCoinAPI, getCollectionDetailsAPI} from "../../services";
import {ref} from "vue";
import {useUserInfoStore} from "../../stores/modules/userInfo";
const commonInfoStore = useCommonInfoStore()
onLoad(()=>{
  // #ifdef H5
  commonInfoStore.initJSDKConfig()
  // #endif
})
const toMtCount = () => {
  toMiniAppSetting(1)
}

const useUser = useUserInfoStore()
const downTime = ref(10)
const time = ref()
const userReader = ref() // 用户是否已读
onLoad(async () => {
  if (time.value) {
    clearInterval(time.value)
    downTime.value = 10
  }
  let res = await getCollectionDetailsAPI()
  userReader.value = res.result.mtTutorial
  if (!userReader.value) {
    time.value = setInterval(async () => {
      downTime.value = downTime.value - 1
      if (downTime.value <= 0) {
        clearInterval(time.value)
        const res = await addGoldCoinAPI(9)
        uni.showToast({title: res.msg, icon: 'none', duration: 3800})
        // useUser.userInfo.is_sign = 1
      }
    }, 1000)
  }
})
</script>
<style lang="scss">
page {
  margin: 0;
  padding: 0;
  background-color: #F6F6F6;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FA762B, #FA762B);
  color: rgb(36, 141, 241);
}

</style>
<style scoped>
.novice {
  margin: 0 auto;
  width: 100%;
  height: auto;
  padding: 0;
  position: relative;
}

.novice image {
  width: 750rpx;
  height: auto;
  border: 0;
  margin: 0;
  vertical-align: bottom;
}

.novice text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff5a00;
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  bottom: 2.1%;
}
</style>
